<template>
  <a-drawer v-model:visible="visible" :title="isDisabled ? '站点信息查看' : '站点信息编辑'" placement="right" :width="450">
    <a-form ref="formRef" :model="model" :rules="rules" :label-col="{ span: 7 }" @finish="onFinish">
      <a-form-item label="名称" name="name">
        <a-input v-model:value="model.name" allowClear placeholder="请输入名称" :maxlength="50" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="联系人" name="contect">
        <a-input v-model:value="model.contect" allowClear placeholder="请输入联系人" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="站点编码" name="stationCode">
        <a-input v-model:value="model.stationCode" allowClear placeholder="请输入站点编码" :maxlength="50" :disabled="isDisabled" />
      </a-form-item>
      <!-- <a-form-item label="所属项目" name="projectCode">
        <a-select v-model:value="model.projectCode" allowClear placeholder="请选择所属项目">
          <template v-for="(item, index) in projectList" :key="index">
            <a-select-option :value="item.projectCode">
              {{ item.projectName }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item> -->
      <!-- <a-form-item label="设备编码" name="mn">
        <a-input v-model:value="model.mn" allowClear placeholder="请输入设备编码" />
      </a-form-item> -->
      <a-form-item label="所在镇街" name="regionCode">
        <a-select v-model:value="model.regionCode" allowClear placeholder="请选择所在镇街" :disabled="isDisabled">
          <template v-for="(item, index) in regionList" :key="index">
            <a-select-option :value="item.regionCode">
              {{ item.regionName }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="电话" name="tel">
        <a-input v-model:value="model.tel" allowClear placeholder="请输入电话" :disabled="isDisabled" />
      </a-form-item>
      <!-- <a-form-item label="水厂站点类型" name="stationSubtype">
        <JDictSelectTag v-model:value="model.stationSubtype" placeholder="请选择水厂站点类型" dictCode="pump_station_type" allowClear />
      </a-form-item>
      <a-form-item label="站点类型" name="stationType">
        <JDictSelectTag v-model:value="model.stationType" placeholder="请选择站点类型" dictCode="station_type" allowClear />
      </a-form-item> -->
      <a-form-item label="站点状态">
        <JDictSelectTag
          v-model:value="model.state"
          placeholder="请选择站点状态"
          dictCode="station_state"
          allowClear
          disabled
          :disabled="isDisabled"
        />
      </a-form-item>
      <a-form-item label="监控状态">
        <JDictSelectTag v-model:value="model.alarmState" placeholder="请选择监控状态" dictCode="alarm_state" allowClear :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="经度" name="longitue">
        <a-input-group compact style="display: flex">
          <a-input v-model:value="model.longitue" allowClear placeholder="请输入经度" style="flex: 1" :disabled="isDisabled" />
          <a-button type="primary" @click="openMap" :disabled="isDisabled">获取经度</a-button>
        </a-input-group>
      </a-form-item>
      <a-form-item label="纬度" name="latitude">
        <a-input-group compact style="display: flex">
          <a-input v-model:value="model.latitude" allowClear placeholder="请输入纬度" style="flex: 1" :disabled="isDisabled" />
          <a-button type="primary" @click="openMap" :disabled="isDisabled">获取伟度</a-button>
        </a-input-group>
      </a-form-item>
      <!-- <a-form-item label="在线/离线" name="online">
        <a-select v-model:value="model.online" allowClear placeholder="请选择所属项目">
          <a-select-option :value="0">布防</a-select-option>
          <a-select-option :value="1">离线</a-select-option>
          <a-select-option :value="2">报警</a-select-option>
          <a-select-option :value="3">撤防</a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item label="地址" name="address">
        <a-input v-model:value="model.address" allowClear placeholder="请输入地址" :disabled="isDisabled" />
      </a-form-item>
      <template v-if="!isDisabled">
        <a-form-item label="操作">
          <a-button @click="resetForm">重置</a-button>
          <a-divider type="vertical" />
          <a-button type="primary" html-type="submit">提交保存</a-button>
        </a-form-item>
      </template>
    </a-form>
    <CommonAMap ref="commonAMap" @oks="getMapData" />
  </a-drawer>
</template>

<script lang="ts">
import { watch, ref, nextTick, defineComponent, getCurrentInstance } from 'vue';
import { JDictSelectTag } from '/@/components/Form';
import { stationInfoApi, stationAddApi, stationModifyApi } from '/@/api/station';
import { projectListApi } from '@/api/project';
import CommonAMap from '/@/components/CommonAMap/index.vue';
import { useUserStore } from '/@/store/modules/user';
import { validateStationName, validateStationCode } from './validate';
export default defineComponent({
  components: { JDictSelectTag, CommonAMap },
  setup(props, { emit }) {
    const userStore = useUserStore();
    let { proxy } = getCurrentInstance();
    let visible = ref(false);
    let model = ref({
      // 名称
      name: '',
      // 地址
      address: '',
      // 联系人
      contect: '',
      // 经度
      longitue: 0,
      // 纬度
      latitude: 0,
      // 站点编码
      stationCode: '',
      // 站点主体类型
      stationSubtype: '',
      // 站点类型
      stationType: '',
      // 电话号码
      tel: '',
      // 监控状态
      alarmState: '',
      // 站点状态
      state: '',
    });
    let regionList = ref([]);
    let rules = ref({
      name: [{ required: true, message: '请输入站点名称' }],
      stationCode: [{ required: true, validator: validateStationCode, trigger: 'change' }],
      contect: [{ required: true, message: '请输入联系人' }],
      stationSubtype: [{ required: true, message: '请选择站点主体类型' }],
      stationType: [{ required: true, message: '请选择站点类型' }],
      tel: [{ required: true, message: '请输入电话' }],
      mn: [{ required: true, message: '请输入设备编码' }],
      regionCode: [{ required: true, message: '请选择所在镇街' }],
    });

    let projectList = ref([]);

    let isDisabled = ref(false);

    function getRegionData(data: []) {
      regionList.value = data;
    }

    /**
     * 初始化数据
     * @param {number} id
     */
    function init(id, isCheck) {
      isDisabled.value = isCheck;
      stationInfoApi({ id }).then((res) => {
        res['state'] = res['state'] + '';
        res['alarmState'] = res['alarmState'] + '';
        model.value = { ...res };
      });
    }

    function resetForm() {
      proxy.$refs.formRef.resetFields();
    }

    /**
     * 初始化项目列表
     */
    function initProjectList() {
      projectListApi({}).then((res) => {
        projectList.value = res;
      });
    }

    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        stationAddApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          userStore.setRequestStation();
          emit('oks');
        });
      } else {
        stationModifyApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          userStore.setRequestStation();
          emit('oks');
        });
      }
    }

    /**
     * 打开地图
     */
    function openMap() {
      proxy.$refs.commonAMap.visible = true;
      nextTick(() => {
        proxy.$refs.commonAMap.initMap(model.value);
      });
    }

    watch(
      () => visible.value,
      (v) => {
        if (v) {
          initProjectList();
        }
        if (!v) {
          delete model.value.id;
          model.value = {
            // 名称
            name: '',
            // 地址
            address: '',
            // 联系人
            contect: '',
            // 经度
            longitue: 0,
            // 纬度
            latitude: 0,
            // 站点编码
            stationCode: '',
            // 站点主体类型
            stationSubtype: '',
            // 站点类型
            stationType: '',
            // 电话号码
            tel: '',
          };
        }
      },
      { deep: true }
    );

    /**
     * 获取地图返回的经纬度
     */
    function getMapData({ longitue, latitude }) {
      Object.assign(model.value, {
        longitue,
        latitude,
      });
      AMap.plugin('AMap.Geocoder', () => {
        new AMap.Geocoder().getAddress([longitue, latitude], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            model.value.address = result.regeocode.formattedAddress;
          }
        });
      });
    }

    return {
      init,
      visible,
      model,
      rules,
      projectList,
      regionList,
      isDisabled,
      resetForm,
      onFinish,
      openMap,
      getMapData,
      getRegionData,
    };
  },
});
</script>